<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel='stylesheet' href='/stylesheets/global.css' />
    <link rel='stylesheet' href='/stylesheets/index.css' />
  </head>
  <body>
    <div class="title"><%= title %>
      <div class="search">
        <form action="/search" method="get">
            <input class="form-control float-left" name="search" onfocus="document.querySelector('.label').style.opacity = '1';" onBlur="document.querySelector('.label').style.opacity = '0';" placeholder="请输搜索的标签"/>
            <input type="submit" class="btn btn-primary float-right" value="搜索">
        </form>
      </div>
      <div id="user_name">
        <div class="user_name_o"><%= name %></div>
        <div id="exit-login"><a href="/login/exit">退出登入</a></div>
        <div class="user_name_bg"></div>
      </div>
      <div class="label">
        <% label.map((item,index)=>{ %>
          <span onclick="Click_label(this)"><%= item.name %></span>
        <% }) %>
      </div>
    </div>
    <div class="content clear">
      <% data.map((item,index)=>{ %>
        <div class="card-box">
            <div class="card" style="width: 18rem;">
                <div class="card-img-top"><img src="./<%= item.url %>" alt="Card image cap"></div>
                <div class="card-body">
                  <p class="card-text"><%= item.details %></p>
                  <a href="./<%= item.project %>" class="btn btn-primary">download</a>
                </div>
            </div>
        </div>
      <% }) %>
    </div>

    <script>
      var user_name_o = document.querySelector('.user_name_o');
      var exit_login = document.querySelector('#exit-login');
      var user_name_bg = document.querySelector('.user_name_bg');
      var user_name_or = true; 
      user_name_o.onclick = function(){
        if(user_name_or){
          exit_login.style.top = '70px';
          user_name_bg.style.display = 'block';
          user_name_or = false;
        }else{
          exit_login.style.top = '0px';
          user_name_bg.style.display = 'none';
          user_name_or = true;
        }
      }
      user_name_bg.onclick = function(){
        exit_login.style.top = '0px';
        user_name_bg.style.display = 'none';
        user_name_or = true;
      }

      function Click_label(e){
        window.location.href = `/search?search=${e.innerHTML}`;
      }
    </script>
  </body>
</html>
